<html>
    <head>
        <?php $this->load->view('title'); ?>
        <link rel="shortcut icon" href="<?php echo base_url() ?>front-end/images/ac_logo.ico">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>front-end/css/common.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>front-end/css/building_detail.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>front-end/css/jquery.mCustomScrollbar.css">
        <script type="text/javascript" src="<?php echo base_url() ?>front-end/js/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url() ?>front-end/js/jquery.mCustomScrollbar.concat.min.js"></script>
        <script>
            $(document).ready(function(){                
                $("#Detail").mCustomScrollbar({
                    autoDraggerLength: false,
                    scrollButtons:{
                        enable: true
                    },
                    advanced:{
                        updateOnContentResize: true
                    }
                });
                var offset = <?php echo count($building['building_images']); ?>;
                var id = <?php echo $building['building_id']; ?>; 
                var isGetMore = false;
                var NoData = false;
                $(".ThumnailAlbum").mCustomScrollbar({
                    autoDraggerLength: false,
                    scrollButtons:{
                        enable: true
                    },
                    advanced:{
                        updateOnContentResize: true
                    },
                    callbacks:{
                        whileScrolling: function(){
                            if ((mcs.draggerTop/$(this).height() >= 0.7) && (!isGetMore)){
                                var container = $(this).children().children().first();
                                if (!NoData){
                                    $.ajax({
                                        type: 'post',
                                        url: '/building_controller/get_more_building_images',
                                        dataType: 'json',
                                        data:{
                                            'offset' : offset,
                                            'buildingID': id
                                        },
                                        beforeSend: function(){
                                            isGetMore = true;
                                            var html = '<li id="loading"><a title="" class="Thumnail"><img style="width: 60%; margin-left: 25px; border: none;" src="<?php echo base_url() ?>front-end/images/loading.gif" alt="loading"></a></li>';
                                            container.append(html); 
                                        },
                                        success: function(data){
                                            $("#loading").remove();
                                            isGetMore = false;
                                            if (data.status == 'SUCCESS'){
                                                image_list = data.image_list;
                                                offset = data.offset;
                                                var html;
                                                for (i = 0; i < image_list.length; i++){
                                                    html = '<li><a title="'+image_list[i].image_desc+'" class="Thumnail"><img style="border: none;" src="<?php echo base_url() ?>'+image_list[i].image_path+'" alt="'+image_list[i].image_desc+'"></a></li>';      
                                                    container.append(html); 
                                                }                             
                                            }else{
                                                NoData = true;
                                            }
                                        }
                                    });
                                } 
                            }
                        }
                    }
                });
                
                var lastActive;
                $(".Thumnail").live('click', function(){
                    if (lastActive != null){
                        lastActive.removeClass(" Active");
                    }
                    lastActive = $(this);
                    $(this).addClass(" Active");
                    var src  = $(this).children('img').attr('src');
                    $("#BigImage img").attr('src', src);
                });
            });
        </script>
    </head>
    <body>
    	<div id="Container">
	        <?php $this->load->view('header'); ?>
	        <div id="MainContent">
	            <div id="BuildingContent">
	                <div id="Detail">
	                    <div id="BuildingName">
	                        <label style="font-size: 22px;"><?php echo (!empty($building['building_name']) ? $building['building_name'] : '' ) ?></label>
	                    </div>
	                    <div id="BigImage">
	                        <img src="<?php echo base_url(!empty($building['building_images'][0]->image_path) ? $building['building_images'][0]->image_path : "" ); ?>"/>
	                    </div>
	                    <div id="SmallImage">
	                        <ul class="ThumnailAlbum">
	                            <?php if (!empty($building['building_images'])): ?>
	                                <?php foreach ($building['building_images'] as $image): ?>
	                                    <li>
	                                        <a title="<?php echo $image->image_desc ?>" class="Thumnail"><img style="border: none;" src="<?php echo base_url($image->image_path) ?>" alt="<?php echo $image->image_desc ?>"></a>
	                                    </li>
	                                <?php endforeach; ?>
	                            <?php endif; ?>
	                        </ul>
	                    </div>
	                    <div id="BuildingInfo">
	                        <?php echo $building['building_info']; ?>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <?php $this->load->view('menu'); ?>
	        <?php $this->load->view('footer'); ?>
        </div>
    </body>
</html>
